<template>
	<div class="checkModify">
		<el-breadcrumb class="breadcrumb" separator="/">
			<el-breadcrumb-item :to="{ path: '/check' }">我的审核</el-breadcrumb-item>
			<el-breadcrumb-item>修改审核</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="info-content">
			<steps ref="steps"></steps>
			<hr class="hr">
			<div class="title">客户信息</div>
			<div class="infoContent">
				<el-row class="info-row">
					<el-col :span="8" class="info-label">
						订单编号：
						<router-link :to="{path:'/loanApplyDeal?orderNo='+orderNo + '&annexBatchNo='+annexBatchNo+'&customerIdCard='+customerIdCard+'&orderStatus='+orderStatus}">
							<label class="text active">{{customerInfo.orderNo}}</label>
						</router-link>
					</el-col>
					<el-col :span="8" class="info-label">
						业务员：
						<label class="text">{{customerInfo.salesman}}</label>
					</el-col>
					<el-col :span="8" class="info-label">
						业务部门：
						<label class="text">{{customerInfo.salesmanUnit}}</label>
					</el-col>
				</el-row>
				<el-row class="info-row">
					<el-col :span="8" class="info-label">
						客户姓名：
						<label class="text">{{customerInfo.customer}}</label>
					</el-col>
					<el-col :span="8" class="info-label">
						申请日期：
						<label class="text">{{customerInfo.applyDate}}</label>
					</el-col>
					<el-col :span="8" class="info-label">
						车型：
						<label class="text">{{customerInfo.carModel}}</label>
					</el-col>
				</el-row>
				<el-row class="info-row">
					<el-col :span="8" class="info-label">
						贷款额度：
						<label class="text">{{customerInfo.loanPrice}}</label>
					</el-col>
				</el-row>
			</div>
			<div class="title">修改内容</div>
			<div class="infoContent">
				<el-row class="info-row">
					<el-col :span="8" class="info-label">
						修改人：
						<label class="text">{{modifyInfo.person}}</label>
					</el-col>
					<el-col :span="8" class="info-label">
						修改日期：
						<label class="text">{{modifyInfo.date}}</label>
					</el-col>
				</el-row>
				<el-row class="info-row">
					<el-table :data="modifyInfo.dateList" class="info-table" border>
						<el-table-column prop="name" label="修改项名称" width="160">
						</el-table-column>
						<!-- <el-table-column prop="newContent" label="新内容" width="310"> -->
						</el-table-column>
						<el-table-column prop="newContent" label="新内容" width="310">
						</el-table-column>
						<el-table-column prop="oldContent" label="旧内容">
						</el-table-column>
					</el-table>
				</el-row>
			</div>
			<div class="title">审核</div>
			<div class="infoContent">
				<el-row class="info-row">
					<el-col :span="2" class="subTitle">
						审核意见
					</el-col>
					<el-col :span="22">
						<el-input class="info-textarea" :rows="3" type="textarea" placeholder="请输入" v-model="checkInfo.suggess"></el-input>
					</el-col>
				</el-row>
				<el-row class="info-row">
					<el-col :span="2" class="subTitle">
						审核结果
					</el-col>
					<el-col :span="10" class="checkResult">
						<el-radio class="checkResult" v-model="checkInfo.result" label="1">同意</el-radio>
						<el-radio class="checkResult" v-model="checkInfo.result" label="0">不同意</el-radio>
					</el-col>
				</el-row>
			</div>
			<hr class="hr">
			<div>
				<el-button @click="cancal" type="save">取消</el-button>
				<el-button @click="submit" type="primary" :disabled="isFirstSubmit==false">提交</el-button>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'checkModify',
	components: {
		steps: require('../../components/other/steps')
	},
	data() {
		return {
			orderNo: this.$route.query.orderNo,
			orderStatus: this.$route.query.orderStatus,
			applyId: this.$route.query.applyId,
			applyType: this.$route.query.applyType,
			flowNodeId: this.$route.query.flowNodeId,
			taskId: this.$route.query.taskId,
			bizChannel: this.$route.query.bizChannel,
			annexBatchNo: this.$route.query.annexBatchNo,
			customerIdCard: this.$route.query.customerIdCard,
			isFirstSubmit: true,
			customerInfo: {
				orderNo: '', //订单编号
				salesman: '', //业务员
				salesmanUnit: '', //业务部门
				customer: '', //客户姓名
				applyDate: '', //申请日期
				carModel: '', //车型
				loanPrice: '', //贷款额度
			},
			modifyInfo: {
				person: '', //修改人
				date: '', //修改日期
				dateList: [],
			},
			checkInfo: {
				suggess: '', //审核意见
				result: '', //审核结果
			}
		}
	},
	methods: {
		cancal() {
			this.$confirm('是否确认取消?', '取消', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$router.push({ path: '/check' });
			}).catch((error) => {});
		},
		submit() {
			let param = {
				orderNo: this.orderNo,
				taskId: this.taskId,
				flowNodeId: this.flowNodeId,
				bizType: this.bizChannel,
				approvalResult: this.checkInfo.result,
				applyType: this.applyType,
				approvalRemark: this.checkInfo.suggess
			};
			if (param.approvalRemark.length > 200) {
				this.$message.error('审核意见字数过长，请控制在200字以内');
				return;
			}
			if (!this.$libs.mustWrite(param)) {
				this.$message('请把信息补充完整');
				return;
			}
			this.isFirstSubmit = false;
			this.$http.post('/submitTaskController/auditorSubmitTask', param).then((data) => {
				if (data.data.success) {
					this.$message({
						message: '审核成功！',
						type: 'success'
					});
					this.$router.push({ path: '/check' });
				}
			}).catch((error) => {

			});
		}
	},
	mounted() {
		this.$refs.steps.getCheckInfo(this.orderNo, this.orderStatus);
		this.$http.get('/audit/modifyInfo/' + this.orderNo).then((data) => {
			if (data.data.success) {
				let datas = data.data.data;
				this.customerInfo = {
					orderNo: datas.orderNo, //订单编号
					salesman: datas.staffName, //业务员
					salesmanUnit: datas.deptName, //业务部门
					customer: datas.customerName, //客户姓名
					applyDate: datas.applyCreate, //申请日期
					carModel: datas.carModel, //车型
					loanPrice: datas.loanAmount, //贷款额度
				};
				this.modifyInfo.person = datas.modifyStaffName;
				this.modifyInfo.date = datas.modifyCreate;
				this.modifyInfo.dateList = [];
				$.each(datas.modifyHisVOList, (i, val) => {
					this.modifyInfo.dateList.push({
						name: val.fieldAlias,
						newContent: val.newValue,
						oldContent: val.oldValue,
					});
				});
			}
		}).catch((error) => {

		});
	}
}

</script>
<style type="text/css" lang="scss" scoped>
@import '../../assets/css/site.scss';
.checkModify {
	padding: 10px 16px;
	position: relative;
	.info-content {
		background: #fff;
		padding: 20px;
		position: absolute;
		top: 50px;
		left: 16px;
		right: 16px;
		bottom: 0;
		padding-bottom: 60px;
		overflow: auto;
		.hr {
			margin: 20px 0px 30px 0px;
			border: none;
			border-bottom: 1px solid #d3dce6;
		}
		.infoContent {
			margin-right: 350px;
			color: #5e6d82;
			.checkResult {
				text-align: left;
				margin-left: 6px;
				margin-top: 3px;
			}
			.active {
				color: #20a0ff;
			}
		}
	}
}

</style>
